/* eslint-disable no-const-assign */
import { IconButton } from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import AddIcon from "@mui/icons-material/Add";
import Button from "@mui/material/Button";
import "../../CSS/renderElements.css"

import TextComponent from './TextComponent'

const TheRenderElement = (
  index,
  element,
  handleChange,
  variables,
  showVariableSelector,
  setShowVariableSelector,
  listIndex = -1,
) => {
  let { type, name, value, elementList } = element;

  if (type === "text" || type === "listVariable") {
    return <TextComponent
      index={index}
      listIndex={listIndex}
      element={element}
      variables={variables}
      showVariableSelector={showVariableSelector}
      setShowVariableSelector={setShowVariableSelector}
      handleChange={handleChange}
    />;
  } else if (type === "enum") {
    return (
      <div className="selectdiv">
        <label>
          <select
            className="selectStyle"
            name={name}
            value={parseInt(value, 10)}
            onChange={(e) => handleChange(index, parseInt(e.target.value, 10))}
          >
            {elementList.map((option, optionIndex) => (
              <option key={option} value={optionIndex}>
                {option}
              </option>
            ))}
          </select>
        </label>
      </div>
    );
  } else if (type === "bool") {
    return (
      <label className="checkbox-container">
        <input
          type="checkbox"
          name={name}
          checked={value}
          onChange={(e) => handleChange(index, e.target.checked)}
        />
        <span className="slider"></span>
      </label>
    );
  } else if (type === "editableList") {
    const newListElement = () => {
      return JSON.parse(JSON.stringify(elementList));
    };

    if (value.length === 0) {
      value.push(newListElement());
    }

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: "5px", width: "100%" }}>
        {value.map((listItem, listIndex) => (
          <div key={`${listItem.name}-${listIndex}`} className="elementsList">
            {listItem.map((itemElement, itemIndex) => {
              return <div key={`${itemElement.name}-${itemIndex}`} className="editableListStyle" style={{ display: 'flex', flexDirection: 'column', alignItems: 'top', gap: "10px" }}>
                {
                  <label className="mainLabel">
                    {itemElement.name.replace(/([A-Z])/g, ' $1').trim().replace(/^\w/, c => c.toUpperCase())}
                  </label>
                }
                {TheRenderElement(
                  itemIndex,
                  itemElement,
                  (_, valueChild) => {
                    itemElement.value = valueChild;
                    handleChange(index, value);
                  },
                  variables,
                  showVariableSelector,
                  setShowVariableSelector,
                  listIndex
                )}
              </div>;
            })}
            {listIndex > 0 && (
              <IconButton
                aria-label="delete"
                className="deleteIconButton"
                onClick={() => {
                  const newListValue = [...value];
                  newListValue.splice(listIndex, 1);
                  handleChange(index, newListValue);
                }}
              >
                <DeleteIcon className="deleteIcon" />
              </IconButton>
            )}
          </div>
        ))}
        <div className="addButtonContainer">
          <Button
            onClick={() => {
              const newListValue = [...value, newListElement()];
              handleChange(index, newListValue);
            }}
            className="addButton"
            component="label"
            variant="contained"
            tabIndex={-1}
            startIcon={<AddIcon />}
          >
            Add
          </Button>
        </div>
      </div>
    );
  }
};

export default TheRenderElement;
